<template>
  <div class="left-menu">
    <el-menu :key="menuKey" class="el-menu-vertical-demo" :router="true" :default-openeds="menuDefaultActive" :collapse="!expand" :default-active="activeIndex" v-loading="menuLoading">
      <el-sub-menu v-for="menu in menus" :index="menu.index" :key="menu.index" :style="{ width: expand ? '200px' : '' }">
        <template #title>
          <el-icon v-if="menu.index && String(menu.index).includes('setting')"><Setting /></el-icon>
          <el-icon v-else> <Menu /> </el-icon>

          <span>{{ menu.title }}</span>
        </template>
        <template v-if="menu.children && menu.children.length > 0">
          <el-menu-item v-for="child in menu.children" :key="child.index" :index="child.index" :class="'left-menu-' + child.index">
            <template #title>
              <span :title="child.driverDescription ?? ''">{{ child.title }}</span>
            </template>
          </el-menu-item>
        </template>
      </el-sub-menu>
    </el-menu>
    <!--底部的工具-->
    <div class="build-version">
      <!-- <el-icon><Sunny /></el-icon> -->
      <el-text type="info" :title="buildVersion" @click="goHome">{{ npm_package_version }}</el-text>

      <el-switch title="切换主题" v-model="ligntTheme" :active-action-icon="Sunny" :inactive-action-icon="Moon" style="--el-switch-on-color: #b1b3b8; --el-switch-off-color: #2c2c2c; --el-switch-border-color: var(--color-border); margin-right: 5px" @change="ligntThemeChanged" />

      <el-switch title="折叠菜单" v-model="expand" :active-action-icon="DArrowRight" :inactive-action-icon="DArrowLeft" style="--el-switch-on-color: #b1b3b8; --el-switch-off-color: #2c2c2c; --el-switch-border-color: var(--color-border); margin-right: 5px" />
      <!-- <IconTooling /> -->

      <!-- <div>
          <el-text type="info" title="当前版本的构建时间" @dblclick="refresh">{{ buildVersion }}</el-text>
        </div> -->
    </div>
  </div>
</template>
<script setup lang="ts" name="LeftMenu">
import { storeToRefs } from 'pinia'
import { Sunny, Moon, DArrowRight, DArrowLeft } from '@element-plus/icons-vue'
import { ChangeHtmlTheme } from '@/common/utils'
import { useHtmlThemeStore } from '@/pages/index/stores/theme'
import { useRouter } from 'vue-router'

// ts写法, 之后获取属性的值都需要通过props调用
withDefaults(
  defineProps<{
    msg?: string // 是否必传
  }>(),
  {
    msg: '默认值'
  }
)

const stores = useHtmlThemeStore()

const { themeLight: ligntTheme } = storeToRefs(stores)
/**
 * 菜单
 */
const menus: any[] = [
  {
    title: '重要功能',
    index: 'main',
    children: [
      { title: '表单', index: 'form' },
      { title: '表格', index: 'table-view' }
    ]
  },
  {
    title: '设置',
    index: 'settings',
    children: [
      { title: '主要设置', index: 'common-settings' },
      { title: '其他', index: 'other' },
      {
        title: '退出',
        index: 'logout',
        event: () => {
          location.href = '/login/'
        }
      }
    ]
  }
]

/**
 * 菜单不折叠
 */
const expand = ref(true)
/**
 * 路由
 */
const router = useRouter()
/**
 * ReactivityTransforms使用的$ref，避免傻逼的.value的方式
 */
let menuKey = $ref<number>(1)

let menuDefaultActive = $ref<string[]>([])

const activeIndex = ''

let menuLoading = $ref(false)

const buildVersion = process.env.buildVersion ?? ''

const npm_package_version = process.env.npm_package_version

onMounted(() => {
  console.debug(`LeftMenu document.documentElement.classList.contains("dark")`, document.documentElement.classList)

  menuDefaultActive = menus.map((item) => item.index)
  console.log('menuDefaultActive', menuDefaultActive)
})

/**
 * @see ligntTheme
 * @param value
 */
const ligntThemeChanged = (value: boolean) => {
  // console.debug('ligntThemeChanged', value)
  ChangeHtmlTheme(value)
}

const goHome = () => {
  router.push({
    path: '/',
    // name: 'home',
    query: {
      msg: 'hello'
    }
  })
}
</script>
<style scoped lang="scss">
$leftMenuWidth: 200px;

@keyframes scale-in-ver-top {
  0% {
    transform: scaleY(0);
    transform-origin: 100% 0%;
    opacity: 1;
  }

  100% {
    transform: scaleY(1);
    transform-origin: 100% 0%;
    opacity: 1;
  }
}

.left-menu {
  // 1rem 是相对于根元素（通常是 <html> 标签）的字体大小。默认情况下，根元素的字体大小是 16 像素，因此 1rem 通常等于 16 像素。不过，这可以根据 CSS 的设置有所变化
  border-radius: 1rem;
  overflow: hidden;

  animation: scale-in-ver-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  // width: 100%;
  height: 100%;

  // color: var(--color-text);
  // background-color: var(--color-background);

  .el-menu {
    // width: 200px;
    height: 100%;
  }

  .build-version {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    text-align: center;
    text-align: center;

    .el-text {
      float: left;

      width: 60px;
    }

    .el-switch {
      float: left;
      margin-left: 10px;
    }
  }

  //   active-text-color="#ffd04b" background-color="#545c64" text-color="#fff"
}
</style>
<style lang="scss" scoped>
// 使用prefers-color-scheme用户在网站中手动切换，
// @media (prefers-color-scheme: dark) {

//   .left-menu {
//     :deep(.el-menu) {
//       color: var(--color-text);
//       background-color: #545c64;

//       * {
//         color: var(--color-text);
//       }

//       .el-menu-item {
//         &:hover {
//           background-color: var(--color-border-hover);
//         }
//       }

//       .el-menu-item.is-active {
//         span {
//           color: #ffd04b !important;
//         }
//       }

//       .el-sub-menu__title {
//         &:hover {
//           background-color: var(--color-border-hover);
//         }
//       }
//     }
//   }
// }

html.dark {
  .left-menu {
    :deep(.el-menu) {
      // color: var(--color-text);
      // background-color: #545c64;
      // background-color: var(--color-shallow-bg);

      * {
        color: var(--color-text);
      }

      .el-menu-item {
        &:hover {
          background-color: var(--color-border-hover);
        }
      }

      .el-menu-item.is-active {
        span {
          color: #ffd04b !important;
        }
      }

      .el-sub-menu__title {
        &:hover {
          background-color: var(--color-border-hover);
        }
      }

      .el-icon {
        color: var(--color-text);
      }
    }
  }
}
</style>
